<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
	</head>

	<body>
		<div id="app">
			<!-- {{插值表达式}} 可以用来获取data中属性数据 -->
			<h1>{{message}}</h1>
			<hr />
			<!-- 插值表达式,可以执行 算数运算,关系运算,逻辑,3元运算符 -->
			<h1>{{age%2}}</h1>
			<h1>{{age==19}}</h1>
			<h1>{{age%2==0?"啊":"哈"}}</h1>
			<hr />
			<h1>{{flag}}</h1>
			<hr />
			<h1>{{hobby[0]}}</h1>
			<h1>{{hobby}}</h1>
			<hr />
			<!--<h1>{{emp.haha}}</h1>-->
			<h1>{{emp.name}}--{{emp.sex}}--{{emp.age}}</h1>
			<hr />
			<h1>{{stuList[0].name}}--{{stuList[1].name}}--{{stuList[2].name}}</h1>
		</div>
		<script>
			new Vue({
				// el ->element
				el:"#app",
				data:{//设置数据模型
					//设置了属性名message 值是hahaha
					message:"hahaha",
					age:19,
					flag:true,
					hobby:["照相","爬山","旅游","动漫","游戏"],
					emp:{
						name:"张三",
						sex:"男",
						age:18
					},
					stuList:[
					   {
					   	name:"张三",
						sex:"男",
						age:18
					   },
					    {
					   	name:"李四",
						sex:"男",
						age:18
					   },
					    {
					   	name:"王五",
						sex:"男",
						age:18
					   }
					]
				}
			})
		</script>
	</body>

</html>